import {useEffect, useState} from "react";
import OperUnit from '@/components/operunit'
import {Input, message, Modal, Pagination, Button} from 'antd'
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {cyDateGap} from "@/common/request";
import ReactMarkdown from 'react-markdown'
import bfLike from '@/assets/images/beforeLike.svg'
import atLike from '@/assets/images/afterLike.svg'
import bfCollect from '@/assets/images/beforeCollect.svg'
import atCollect from '@/assets/images/afterCollect.svg'
import rehypeRaw from 'rehype-raw'
import config from "@/config/config";
import './detailcard.scss'

import postData from '@/assets/json/post.json'

const api = config.api
const baseURL = api.baseURL
const post = api.post
const categoryList = config.head.navi
const postURL = [api.baseURL, api.post.base].join('')
const wls = window.localStorage

function ArticleMain() {
  const [artId, setArtId] = useState(0)                   // 帖子 id
  const [posterId, setPosterId] = useState(-1)                  // 发布者 id
  const [artCategoryId, setArtCategoryId] = useState(0)                   // 类型
  const [artTitle, setArtTitle] = useState('获取标题中...')      // 标题
  const [artContent, setArtContent] = useState('获取内容中...')      // 内容
  const [artTagList, setArtTagList] = useState([])                  // 标签列表
  const [artCreate, setArtCreate] = useState('获取创建时间中...')  // 创建时间
  const [artUpdate, setArtUpdate] = useState('获取更新时间中...')  // 更新时间
  const [artViewCount, setArtViewCount] = useState(10)                   // 浏览数
  const [artReplyCount, setArtReplyCount] = useState(10)                   // 评论数
  const [artFavoCount, setArtFavoCount] = useState(10)                   // 收藏数
  const [artLikeCount, setArtLikeCount] = useState(10)                   // 点赞数
  const [artLike, setArtLike] = useState(true)               // 是否点赞
  const [artFavorite, setArtFavorite] = useState(true)               // 是否收藏

  function getArticle() {
    const post = postData.data.postDto.post
    setArtId(post.id)
    setPosterId(postData.data.postDto.userId)
    setArtCategoryId(post.categoryId)
    setArtTitle(post.title)
    setArtContent(post.content)
    setArtTagList(postData.data.tagList)
    setArtCreate(post.createdAt)
    setArtUpdate(post.updatedAt)
    setArtLikeCount(post.likeCount)
    setArtReplyCount(post.replyCount)
    setArtFavoCount(post.favoriteCount)
    setArtViewCount(post.viewCount)
    setArtLike(postData.data.like)
    setArtFavorite(postData.data.favorite)

    /*cyGet('文章详情',
      cyUrl([baseURL, post.base, post.view]),
      {
        token: wls.XB_token,
        id: wls.XB_post_id_now
      }
    ).then(data => {
      const post = data.postDto.post
      setArtId(post.id)
      setPosterId(data.postDto.userId)
      setArtCategoryId(post.categoryId)
      setArtTitle(post.title)
      setArtContent(post.content)
      setArtTagList(data.tagList)
      setArtCreate(post.createdAt)
      setArtUpdate(post.updatedAt)
      setArtLikeCount(post.likeCount)
      setArtReplyCount(post.replyCount)
      setArtFavoCount(post.favoriteCount)
      setArtViewCount(post.viewCount)
      setArtLike(data.like)
      setArtFavorite(data.favorite)
    }).catch(err => {
      message.error('服务器爆炸啦~')
      console.log(err);
    })*/
  }

  function getCategoryText(id: any) {
    const cate = (categoryList.find(item => item.categoryId === id))?.page
    return cate ? cate : '测试'
  }

  const {confirm} = Modal;

  function showConfirm() {
    confirm({
      title: '确认删除帖子？',
      icon: <ExclamationCircleOutlined/>,
      content: '帖子和评论将会被删除，该操作不可逆！',
      onOk() {
        deletePost()
      }
    })
  }

  function deletePost() {
    /* cyPost('删除帖子',
       cyUrl([baseURL, post.base, post.deletePost]),
       {
         token: wls.XB_token,
         id: wls.XB_post_id_now
       }
     ).then(() => {
       message.success({
         content: '删除成功！',
         duration: 1,
         onClose: () => {
           window.history.back()
           window.location.reload()
         }
       })
     }).catch(err => {
       message.error(err)
     })*/
  }

  useEffect(() => {
    document.getElementsByClassName('com-main')[0].scrollTop = 0
    message.config({
      top: 100
    })
    getArticle()
  }, [])

  return (
    <div className='com-article-main'>
      <div className='com-article-main_header'>
        <div className='com-article-main_title'>
          <span className='category'>
            {getCategoryText(artCategoryId)}
          </span>
          <h1 className='title'>
            {artTitle}
          </h1>
          {
            posterId === parseInt(wls.XB_id) ? <span className='right' onClick={showConfirm}>删除文章</span> : ''
          }
        </div>

        <div className='com-article-main_info'>
          <span className='info_sector'>
            来自板块：<span className='organ'>{getCategoryText(artCategoryId)}</span>
          </span>
          <span className='info_data'>
            <span className='unit'>浏览 {artViewCount}</span>
            <span className='unit'>评论 {artReplyCount}</span>
            <span className='unit'>点赞 {artLikeCount}</span>
            <span className='unit'>收藏 {artFavoCount}</span>
          </span>
        </div>

        <div className='com-article-main_updatetime'>
          <span>文章发表：{cyDateGap(artCreate)}</span>
          <span className='slash'>|</span>
          <span>最后更新：{cyDateGap(artUpdate)}</span>
        </div>
      </div>

      <div className='com-article-main_content'>
        <ReactMarkdown className='content' rehypePlugins={[rehypeRaw]}>{artContent}</ReactMarkdown>
        <div className='tags'>相关标签：
          {artTagList ?
            artTagList.map((item: any, index) => {
              return (
                <span className='tag' key={index}>{item.name}</span>
              )
            }) : ''
          }
        </div>
      </div>

      <div className='com-article-main_footer'>
        <OperUnit
          className='viewer-oper'
          active={artLike}
          iconSrc={[bfLike, atLike]}
          value={artLikeCount}
          articleId={artId}
          api={[postURL, api.post.like].join('')}
          method='post'
          note='点赞'/>
        <OperUnit
          className='viewer-oper'
          active={artFavorite}
          iconSrc={[bfCollect, atCollect]}
          value={artFavoCount}
          articleId={artId}
          api={[postURL, api.post.favorite].join('')}
          method='post'
          note='收藏'/>
      </div>
    </div>
  )
}

export default ArticleMain
